<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <title>JQuery 实现瀑布流</title>
        <style>
        body {
                text-align: center;
                margin: 0;
                padding: 0;
                background-color: #F7F7F7;
                font-family: '微软雅黑';
        }
        
        .wrapper {
                padding: 50px;
        }
        
        img {
                display: block;
                width: 100%;
                height: 300px;
        }
        
        .items {
                position: relative;
                /* display: flex; */
                /* 环函 */
                /* flex-wrap: wrap; */
        }
        
        .item {
                width: 228px;
                position: absolute;
        }
        
        .tips {
                width: 280px;
                height: 40px;
                margin: 30px auto 0;
                text-align: center;
                line-height: 40px;
                background-color: #CCC;
                border-radius: 6px;
                font-size: 24px;
                cursor: pointer;
        }
        
        .tips.loading {
                /* background-color: transparent; */
                background-color: hotpink;
        }
        </style>
   
</head>

<body>
        <h1>瀑布流 展示页面</h1>
        <div class="wrapper">
                <!-- items 作为 瀑布流的容器  瀑布流中的 元素的 宽度 是固定的 -->
                <div class="items">
                </div>
                <p class="tips loading" onclick="getData()">正在加载...</p>
        </div>
</body>

</html>


<!-- 步骤一 导入js -->
<!-- 导入模板引擎
        不依赖于 jQuery 可以直接使用
 -->
<script type="text/javascript" src='../js_lib/template-native.js'></script>


<!-- 导入jq -->
<script type="text/javascript" src='../js_lib/jquery.min.js'></script>

<!-- 导入jq插件 必须 晚于jq -->
<script type="text/javascript" src='currentJs/jQuery.pubuliu.js'></script>

<!--  步骤二,定义模板 -->
<!-- 定义的模板 -->
<!-- 到时候 丢进来的是一个对象 {items:[obj,obj]} -->
<script type="text/template" id='template'>
        <% for(var i =0;i<items.length;i++){%>
                <div class='item'>
                        <img src="<%=items[i].path%>" alt="">
                        <p><%=items[i].text%></p>
                </div>
        <%}%>
</script>

<script type="text/javascript">

// 是否需要放置到入口函数中
        function getData(){
                // 使用jq 发送ajax请求即可
                $.ajax({
                        url:'02.waterfall.php',
                        success:function(data){
                                // 转化完毕以后 是一个数组
                                // console.log(data);

                                // 为了配合模板引擎使用 这里包装成为一个 对象
                                var dataObj = {
                                        items:data
                                }

                                // 调用模板引擎 传入对象 渲染页面
                                var resultString = template('template',dataObj);

                                // 添加到界面上
                                $('.items').append(resultString);

                                // 调用自己写的瀑布流插件 开始布局
                                $(".items").pubuliu();
                        },
                        dataType:'json'
                })
        }
</script>

